<template>
	<div class="ucPage">
		<version></version>
		<div class="uc">
			<div class="uc-head">
				<i class="fa fa-list-ul menu-icon visible-xs" v-if="isLogin" @click="drawer=true"></i>
				<span class="hidden-xs"></span>
				<wallet></wallet>
			</div>
			<div v-if="isLogin">
				<router-view ></router-view>
			</div>
			<div class="uc-body" v-else>
				<h3 class="c-red" >
					请登录钱包
				</h3>
			</div>



		</div>
		<!--抽屉菜单-->
		<el-drawer title=""  size="70%" :visible.sync="drawer" direction="ltr" :with-header="true">
			<div class="draw-list">
				<uc-menu></uc-menu>
			</div>
		</el-drawer>
	</div>
</template>


<script type="text/javascript">

	/*加载资源*/
	import { mapActions, mapGetters, mapState } from 'vuex'
	import wallet from '@/components/wallet'
	import ucMenu from "@/views/uc/components/ucMenu";
	import version from "@/components/version";
	import * as type from '@/store/mapMutations' //mutations方法名映射
	export default {
		name:"uc.vue",
		components:  { wallet,ucMenu ,version},
		mixins:[],
		data () {
			return {
				drawer     : false,
			};
		},
		computed:{
			...mapGetters(['isLogin'])// 映射计算数据
		},
		created () {

		},
		mounted () {
			this[type.GET_SUPER_USER]();//从服务器加载超级用户
		},
		methods:{
			...mapActions([
				type.GET_SUPER_USER,
			]),
		},
		watch:{
			$route (to, from) {
				this.drawer = false //切换路由时，就关闭抽屉
			},
		}
	};
</script>


<style lang="less">

	/*公共变量*/
	@import '~@/assets/global.less';
	/*用户中心*/
	.ucPage {
		background: #f7faff !important;
		background: #f2f2f2 !important;
		min-height: 100Vh
	}
	.uc {width:100%;max-width:1000px;margin:0px auto;}
	.uc-head {
		background:#3f70ed;padding:40px 0px;display: flex;justify-content: space-between;align-items: center;
		border-bottom-left-radius: 0px;border-bottom-right-radius: 0px;
		.menu-icon {color:#fff;font-size:28px;margin-left: 10px;}
		.wallet-button {
			max-width: 300px;
		}
	}
	.uc-body {
		height: 100%;
		min-height: 600px;
		padding: 30px;
		margin-top: 10px;
		border-radius: 0px;
		background-color: #fff;
		//box-shadow: 0px 0px 14px rgba(0,0,0,0.1) ;
	}
	//.uc-body:hover{box-shadow: 0px 0px 50px rgba(60,110,200,0.3)}

	/*ele 翻页组件reset*/
	.el-pagination {padding: 2px 0px!important;display:flex;align-items: center;justify-content: flex-end}
	.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li{
		margin: 0 2px!important;
	}
	/************************************适应***************************************/
	@media screen and (max-width: @MINSCREEN){
		/*用户中心*/
		.uc {}
		.uc .uc-head {padding:5px 0px}
		.uc .uc-body{min-height: calc(100vh - 120px);padding:15px!important;margin-top:0px;border-radius: 0px;}
	}
</style>

<style lang="less" scoped>
@import '~@/assets/global.less';
//抽屉菜单
/deep/.draw-list {
	padding:0px 20px 20px; height:100vh;overflow-y: scroll;background-color: #fff;

	li {
		padding:0px 0px 0px;box-sizing:border-box;
		&:nth-child(n+1) {border-bottom:1px solid #eee;}
		//&:nth-child(n+2) {margin-top: 15px;}//从第二个开始
		a{width: 100%;color: #333;font-size:16px;display: block;padding:10px 0px;}
		a:hover,.router-link-exact-active{color:@blue;background-color: #fff; }
		a i {font-size: 24px;margin-right: 10px;}
	}
	//导航
	//li a:hover,li .router-link-exact-active{color:#fff;background-color: @blue; }

}
</style>
